{% extends 'layout/organba.html' %}
{% load static %}
{% block title %} 邀请码 {% endblock %}
<script>
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        })
    </script>

{% block content %}

<!--表格 如果觉得宽度太宽可以设置with-->
<div class="container">


<div class="table-responsive">
  <table class="table">
    <caption>您的邀请码的信息：</caption>
    <thead>
      <tr>
        <th >邀请码</th>
        <th>以使用次数</th>
        <th>状态</th></tr>
    </thead>
    <tbody>

      <tr>

        <td id="yqm">{{ v.invite }}<a href="#" id="btnn"  title="点击复制到剪切板"><i id="ii"  data-content="复制成功" data-container="body" data-toggle="popover" data-placement="top" class="fa fa-copy"></i></a></td>
        <td>{{ v.number }}</td>

          {% if v.status == 1 %}
          <td id="qy">已启用</td>
             {% else %}
          <td id="qy">未启用</td>
          {% endif %}
               </tr>

    </tbody>
  </table>


</div>
<button class="btn btn-info" data-toggle="modal" data-target="#Modal">修改邀请码</button>

</div>






<!-- 模态框（Modal） -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改邀请码信息</h4>
            </div>
            <div class="modal-body">


       <form id="inv"  class="form-horizontal" role="form"  >
         {% csrf_token %}

                    <div class="form-group">

                        <label for="czyqm" class="col-lg-3 control-label">是否重置邀请码:</label>
                        <div class="col-lg-8">
                          <div class="el-checkbox">
                             <input type="checkbox" id="checkbox" name="check1" value="option1">
                              <label for="checkbox" class="el-checkbox-style"></label>

                           </div>

                    </div>
                    </div>

                        <div class="form-group">
                            <label for="qyyqm" class="col-lg-3 control-label">是否启用邀请码:</label>

                        <div class="col-lg-8">

                               <div class="el-checkbox">
                             <input type="checkbox" id="checkbox1" name="check2" value="option2">
                              <label for="checkbox1" class="el-checkbox-style"></label>
                               </div>

                    </div>


                    </div>

                </form>


            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="gb">关闭</button>
                <button type="button" class="btn btn-primary" id="tj">提交更改</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

{% endblock %}



{% block js %}

        <script>



          $(function () {
              $("#tj").click(function () {

                   $.ajax({
                     url: "{% url 'web:organinvite' %}",
                     type: "POST",
                     data: $('#inv').serialize(), // 所有字段数据 + csrf token
                     dataType: "JSON",
                     success: function (res) {
                        if (res.status) {
                            location.href ="{% url 'web:organinvite' %}";
                        } else {
                            $("span").remove();
                             $("#gb").before("<span id='span' class='btn btn-warning'>设置失败！</span>");


                        }
                    }
                })
            })




            // 复制的方法
            function copyText(text, callback){ // text: 要复制的内容， callback: 回调
                var tag = document.createElement('input');
                tag.setAttribute('id', 'cp_hgz_input');
                tag.value = text;
                document.getElementsByTagName('body')[0].appendChild(tag);
                document.getElementById('cp_hgz_input').select();
                document.execCommand('copy');
                document.getElementById('cp_hgz_input').remove();
                if(callback) {callback(text)}
            }

            // 点击按钮调用复制
            document.getElementById('btnn').onclick = function (){
                copyText( $("#yqm").text() , function (){

                    $("#ii").popover("show");

                     timeonclick=setTimeout(function () {
                         $("#ii").popover("hide");
                     }, 2000);


                    console.log('复制成功')})
            }




        });






        </script>
{% endblock %}